<template>
	<view>
		<view class="comment" v-for="(item, index) in items" :key="item._id">
			<view class="comment-avatar">
				<image :draggable="false" :src="getUserAvatar(item)"></image>
			</view>
			<view class="comment-content" :style="{ 'padding-right': !item.comment_type ? '10rpx' : '0rpx' }">
				<view class="header">
					<text>{{ getInfo(item).nickname || getInfo(item).username }}</text>
				</view>
				<view class="content">
					<text class="content-text">
						<text class="reply-user">{{ handleComment(item.comment_type, item.reply_user_id) }}</text>
						{{ item.comment_content }}
					</text>
				</view>
				<view class="footer">
					<view class="timer">
						<uni-dateformat class="time-format" :date="item.comment_date" format="yyyy/MM/dd" :threshold="[60000, 3600000 * 24 * 30]"></uni-dateformat>
					</view>
					<view class="tools">
						<view class="like">
							<!-- <text class="iconfont icon-good" @click="commentLike(item)"></text> -->
							<text>{{ item.like_count ? item.like_count : '' }}</text>
						</view>
						<text class="iconfont icon-chat" @click="replay(item)"></text>
					</view>
				</view>
				<view v-if="item.comment_type != 0" class="more" @click="loadmore(item)">
					<template v-if="loadChildStatus && childList.length && index == childList.length - 1">
						<u-loading-icon></u-loading-icon>
					</template>
					<template v-else-if="!loadChildStatus && childList.length && index == childList.length - 1">
						<text v-if="!hasClickMore && item.parent_all_reply_count - childList.length > 0">{{ item.parent_all_reply_count - childList.length }}条评论</text>
						<text v-if="hasClickMore && item.parent_all_reply_count - childList.length > 0">点击展开更多</text>
						<text v-if="item.parent_all_reply_count - childList.length > 0" class="iconfont icon-bottom"></text>
					</template>
				</view>
				<view class="comment-list">
					<CommentItem v-if="item.children && item.children.length > 0" :items="item.children" :childList="item.children" @updateComment="updateComment"></CommentItem>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getUserAvatar, getInfo } from '@/utils/tool.js';

const commentObj = uniCloud.importObject('blog-comment', { customUI: true });
export default {
	name: 'CommentItem',
	props: {
		items: {
			type: Array,
			required: true
		},
		childList: {
			type: Array
		},
		order: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			loadChildStatus: false,
			hasClickMore: false
		};
	},
	methods: {
		getUserAvatar,
		getInfo,
		showMore(item) {
			return this.loadChildMap[item._id] && item.parent_all_replay_count - this.childList.length >= 0;
		},
		async loadmore(item) {
			this.loadChildStatus = true;
			let order = this.order.orderField && this.order.sort ? this.order : { orderField: 'comment_date', sort: 'desc' };
			const that = this;
			const obj = {
				ancestor_id: item.ancestor_id || item.reply_comment_id,
				order,
				skip: this.childList.length
			};
			commentObj
				.getChildData(obj)
				.then((res) => {
					this.loadChildStatus = false;
					this.$emit('updateComment', { type: 'updateChildList', ancestor_id: item.ancestor_id, data: res });
				})
				.catch((err) => {
					this.loadChildStatus = false;
					return uni.showToast({
						title: err.message,
						icon: 'none'
					});
				})
				.finally(() => {
					if (!this.hasClickMore) {
						this.hasClickMore = true;
					}
				});
		},
		updateComment(...args) {
			this.$emit('updateComment', ...args);
		},
		replay(item) {
			this.commentItem.replyCommentId = item;
		},
		calcCommentCount(parentAllChildCount, currentChildCount, index) {
			return parentAllChildCount - currentChildCount > 0 && index == currentChildCount.length - 1;
		},
		handleComment(type, reply_user_id) {
			if (type !== 2) return '';
			if (!reply_user_id) return '';
			const name = reply_user_id.length ? reply_user_id[0].nickname || reply_user_id[0].username : '';

			return `@回复 ${name}:`;
		}
	},
	computed: {
		commentItem() {
			const that = this;
			return new Proxy(this.items, {
				get(target, key) {
					return Reflect.get(target, key);
				},
				set(target, key, value) {
					return that.$emit('updateComment', { type: 'updateAttr', target, key, value });
				}
			});
		}
	},
	mounted() {}
};
</script>

<style lang="scss" scoped>
.comment {
	display: flex;
	padding: 0 20rpx;
	&-avatar {
		width: 65rpx;
		height: 65rpx;
		padding: 10rpx;
		image {
			width: 65rpx;
			height: 65rpx;
			border-radius: 50%;
		}
	}
	&-content {
		flex: 1;
		padding: 10rpx;
		view {
			margin-bottom: 5rpx;
		}
		.content {
			display: flex;
			.content-text {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				word-break: break-all;
				.reply-user {
					color: #c0c4cc;
				}
			}
			.show-all {
				display: block;
			}
			.show-more {
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}
		.footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.tools {
				display: flex;
				justify-content: center;
				align-items: center;
				.like {
					padding: 10rpx;
					margin: 0;
				}
				.icon-chat {
					padding: 10rpx;
				}
				.active {
					color: $active-color;
				}
			}
		}
		.more {
			.iconfont {
				margin-left: 6rpx;
			}
		}
		.comment-list {
			.comment {
				padding: 0;
			}
			.comment-avatar {
				width: 60rpx;
				height: 60rpx;
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
			.comment-content .content .content-text {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				word-break: break-all;
			}
		}
	}
}
</style>
